<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html style="display: block;">
<head>
    <title>系统登录</title>
    <meta charset="UTF-8">
    <link rel="icon" href="../static/images/favicon.ico" type="image/x-icon" />
    <link rel="shortcut icon" href="../static/images/favicon.ico" type="image/x-icon" />
    <script src="../static/styles/dwz/js/jquery-1.7.2.js"></script>
    <script src="../static/styles/dwz/js/jquery.cookie.js"></script>
    <script src="../static/js/jquery.enplaceholder.js"></script>
    <style type="text/css">
        input:-webkit-autofill {
            -webkit-box-shadow: 0 0 0px 1000px white inset;
        }

        * {
            margin: 0;
            padding: 0;
        }

        html {
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
            padding: 64px 0;
            overflow: auto;
        }

        html,body {
            height: 100%;
            font: 12px/1.5 Tahoma, Helvetica, Arial, Microsoft YaHei, sans-serif;
        }

        .header {
            width: 100%;
            height: 84px;
            overflow: hidden;
            background: #ffffff;
            position: relative;
            top: -84px;
        }

        .header-contianer {
            width: 1024px;
            height: 100%;
            /** margin: auto ;**/
            position: relative;
            top: 17px;
            left: 15px;
        }
        .header-contianer img {
            height: 90%;
        }

        .main {
            width: 100%;
            height: 100%;
            position: relative;
            min-height: 410px;
            max-height: 900px;
            min-width: 1000px;
            top: -64px;
            background: url('../static/images/login/login-bg.jpg')
            repeat center 0;
        }

        .footer {
            top: -64px;
            position: relative;
            width: 100%;
            bottom: 0px;
            height: 64px;
            text-align: center;
            color: #adadad;
            background: #ffffff;
            margin: 0;
            padding: 0;
        }

        .footer-text {
            position: absolute;
            top: 50%;
            height: 50px;
            margin-top: -18px;
            text-align: center;
            width: 100%;
        }

        @media ( min-width : 1280px) {
            .back {
                width: 100%;
                height: 100%;
                position: absolute;
                left: 0;
                top: 0;
                background-size: contain;
                background: url('../static/images/login/login-bgimg-l.png')
                no-repeat center 0;
            }
        }

        @media ( min-width : 768px) and (max-width: 1199px) {
            .back {
                width: 100%;
                height: 100%;
                position: absolute;
                left: 0;
                top: 0;
                background-size: contain;
                background: url('../static/images/login/login-bgimg-s.png')
                no-repeat center 0;
            }
        }

        .login-contianer {
            width: 1024px;
            height: 100%;
            position: relative;
            margin: auto;
        }

        .img-contianer {
            float: left;
            position: absolute;
            top: 50%;
            left: 50%;
            margin: -200px 0 0 -500px;
        }

        .img-contianer img {
            width: 461px;
            height: 400px;
        }

        .loginBox {
            position: absolute;
            top: 58%;
            left: 60%;
            padding: 20px 20px 0px 20px;
            margin: -190px 0 0 100px;
            float: right;
            background: #ffffff;
            color: #888888;
            width: 280px;
            height: 280px;
            border-radius: 10px;
            overflow: hidden;
            z-index: 1;
        }

        .loginBox ul {
            margin-top: 20px;
        }

        .loginBox li {
            position: relative;
            height: 38px;
            width: 298px;
            margin-bottom: 15px;
        }

        .loginBox li span {
            display: block;
            position: absolute;
            left: 12px;
            top: 50%;
            margin-top: -8px;
            width: 18px;
            height: 18px;
        }

        .inputcls {
            border-top: 0;
            border-left: 0;
            border-right: 0;
            border-bottom: 1px solid #ecf0f1;
            height: 23px;
            width: 210px;
            padding: 6px 30px 6px 38px;
            line-height: 26px;
            font-family: "宋体";
            color: #333;
            font-size: 14px;
        }

        input:focus {
            outline: none;
            border-bottom: #87C6F9 1px solid;
            box-shadow: 0 0 8px rgba(103, 166, 217, 1);
        }

        input:required {
            outline: none;
            border-bottom: red 1px solid;
        }

        ul,li {
            list-style: none;
        }
        .userNameIcon span {
            background: url('../static/images/login/login-user.png')
            no-repeat center 0;
        }

        .passwordIcon  span {
            background:
                    url('../static/images/login/login-password.png')
                    no-repeat center 0;
        }

        .loginTitle {
            font-family: "微软雅黑";
            color: #32a1da;
            font-size: 17px;
            margin-left: 12px;
        }

        .tips {
            margin-left: 10px;
            color: red;
        }

        .loginBtn {
            margin-top: 20px;
            margin-bottom: 8px;
            width: 283px;
            height: 40px;
            background: #7cd41e;
            border: none;
            font-size: 16px;
            color: #ffffff;
            border-radius: 5px;
            font-family: "微软雅黑";
        }

        .loginBtn:hover {
            background: #70bf1b;
        }

    </style>
</head>
<body>
<div class="header">
    <div class="header-contianer">
        <img border="0" src="../static/images/login/login-logo.png" alt="jteach">
    </div>
</div>
<div class="main">
    <div class="back"></div>
    <div class="login-contianer">
        <div class="img-contianer">
            <img src="../static/images/login/login-img.png">
        </div>
        <div class="loginBox">
            <form action="/doLogin" id="login_form" method="post">
                <input name="username" type="hidden" /> <label class="loginTitle">用户登录</label> <label class="tips"><#if message??>*${message!''}</#if></label>
                <ul>
                    <li class="userNameIcon"><span></span> <input name="userCode" id="j_username" type="text" class="inputcls in" placeholder="用户名">
                    </li>
                    <li class="passwordIcon"><span></span> <input id="j_password" name="password" type="password" class="inputcls in" name="password" placeholder="密码">
                    </li>
                    </li>
                </ul>
                <div class="loginBtnArea">
                    <input type="submit" id="login_ok" class="loginBtn" value="立即登录"> <span></span>
                </div>
            </form>
            <div style="margin: 0 auto;position: absolute; bottom: 15px;">
                <div style="position: relative;float: right; cursor: pointer; font-size: 14px">
                    <a href="#" style="text-decoration: inherit; color: #32465A">忘记密码</a>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="footer">
    <div class="footer-text">
        <p>联系电话：4006902530 邮箱：lidapeng@cai-inc.com</p>
        <p>Copyright © 2018-2020 ,wangyuhudong.com inc. 网竞科技版权所有，保留所有权利。</p>
    </div>
</div>
</body>
</html>
<script type="text/javascript">
    $("#j_userName").focus();

    $("#login_form").submit(function() {
        var issubmit = true;
        var i_index = -1;
        $(this).find('.in').each(function(i) {
            if ($(this).val() == $(this)
                            .attr("placeholder")) {
                $(this).css('border-bottom',
                        '1px #ff0000 solid');
            }
            if ($.trim($(this).val()).length == 0) {
                $(this).css('border-bottom',
                        '1px #ff0000 solid');
                issubmit = false;
                if (i_index == -1)
                    i_index = i;
            } else {
                if (!($(this).val() == $(this).attr(
                                "placeholder"))) {
                    $(this).css('border-bottom',
                            '1px #ecf0f1 solid');
                }
            }
        });
        if (!issubmit) {
            $(this).find('.in').eq(i_index).focus();
            return false;
        }
        $("#login_ok").attr("disabled", true).val('登陆中..');
        return true;
    });
</script>
